@import '~@alife/aisc-core/purple/scss/index.scss';
@import '~@alife/aone-core/variables/index';
@mixin removeScrollBarStyle() {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

.commit-detail-bottom,
.commit-detail-bottom-commit-change {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-top: 1px solid $gray-02;
  .commit-left-tree {
    position: relative;
    width: 100%;
    height: 100%;
    .left-tree-content {
      flex: 1 1;
      padding-bottom: 10px;
      border-bottom: none;
      padding-top: 20px;
      overflow: hidden;
    }
    .left-tree-divider {
      height: 1px;
      background-color: #e9ebf0;
      margin-bottom: 8px;
    }
  }
  .commit-left-tree-in-compare {
    width: 280px;
  }
  .commit-detail-bottom {
    .tree-wrapper {
      .left-tree-bottom {
        overflow: hidden;
        position: absolute;
        top: 20px;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
  }
  .commit-right-content {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px 0;
    overflow: auto;
    &-title {
      display: flex;
      margin: 20px 0;
      justify-content: space-between;
      align-items: center;
      &-left {
        display: flex;
        align-items: center;
        .tree-title {
          line-height: 20px;
          font-weight: bold;
          font-size: 16px;
          color: $gray-08;
          text-align: left;
        }
        .delete-num,
        .add-num {
          margin-left: 12px;
        }
      }
    }
    .diff-panel-wrapper {
      margin-bottom: 20px;
      position: relative;
      &-sup {
        position: absolute;
        left: 0;
        top: -90px;
        width: 1px;
        height: 1px;
      }
    }
    .diff-panel-wrapper-active {
      .at-path {
        color: $color-link-4;
        .at-path-wrap-last {
          color: $color-link-4;
        }
      }
    }
    .commit-detail-file-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        padding-right: 20px;
        display: flex;
        align-items: center;
        &.split {
          max-width: 678px;
        }
        &.unified {
          max-width: 800px;
        }
      }
      &-right {
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .text-primary {
        line-height: 20px;
        font-size: 12px;
        color: #3da8f5;
      }
      .add-num {
        text-align: left;
        line-height: 20px;
        font-size: 12px;
        color: #5dc670;
        letter-spacing: 0;
        margin-right: 16px;
      }
      .delete-num {
        text-align: left;
        line-height: 20px;
        font-size: 12px;
        color: #e83a3a;
        letter-spacing: 0;
        margin-right: 16px;
      }
    }
    .commit-right-content-num-and-diff {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .commit-right-content-num {
        display: flex;
        align-items: center;
        .commit-right-content-num-left {
          display: flex;
          align-items: center;
          color: var(--color-text1-4, #292929);
          font-size: 14px;
          font-weight: 600;
          .commit-right-content-num-dot {
            display: inline-block;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background-color: var(--color-text1-4, #292929);
            margin: 0 6px;
          }
        }
        .commit-right-content-num-right {
          font-weight: 500;
        }
      }
    }
  }
}

.commit-detail-bottom {
  border-top: none;
}

.commit-detail-bottom-commit-change {
  flex: 1 1;
  border-top: none;
  position: relative;
  .commit-right-content-list {
    flex: 1 1;
    overflow: auto;
    position: relative;
    @include removeScrollBarStyle;
    .file-name-filename {
      & button {
        color: #8b8b8b !important;
      }
    }
    .file-panel-header {
      background-color: white;
    }
  }
  .commit-left-tree {
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    height: 100%;
    .left-tree-content {
      padding-top: 0;
      overflow-y: auto;
      overflow-x: auto;
    }
    .tree-wrapper {
      .left-tree-bottom {
        display: block;
        .left-tree-bottom-header {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-weight: 600;
          color: #404040;
          line-height: 22px;
          padding-bottom: 14px;
          & span:last-child {
            cursor: pointer;
          }
        }
      }
    }
  }
}

.comment-wrapper {
  position: fixed;
  left: 0;
  width: 300px;
  bottom: 0;
  z-index: 99;
  // display: flex;
  .comment-badge {
    .next-badge-scroll-number {
      top: 6px;
      color: #006cfa;
      background: #fff;
    }
  }
  .comment-input-icon {
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid $gray-02;
    border-right: 1px solid $gray-02;
    .comment-icon {
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .line {
      height: 40px;
      width: 1px;
      background-color: $gray-02;
    }
    .comment-input {
      flex: 1;
      border: 0;
      height: 60px;
      text-align: left;
      line-height: 60px;
      font-size: 14px;
      color: #ccc;
      letter-spacing: 0;
    }
  }

  .comment-list {
    padding-top: 20px;
    max-height: 330px;
    overflow: auto;
    .comment-item {
      display: flex;
      margin-bottom: 20px;
      padding-left: 20px;
      padding-right: 5px;
      .comment-image {
        margin-right: 8px;
      }
      .comment-content {
        flex: 1;
        &-note {
          text-align: left;
          line-height: 20px;
          font-size: 14px;
          color: #383838;
          word-break: break-all;
        }
        &-time {
          text-align: left;
          line-height: 20px;
          font-size: 12px;
          color: #808080;
          .apply-btn {
            cursor: pointer;
            &:hover {
              color: #3da8f5;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
  .filter-no-data {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.diff-img-wraper {
  display: flex;
  align-items: flex-start;
  & > div {
    flex: 1;
  }
  &:first-child {
    border-right: 1px solid $gray-03;
  }
}
.diff-single-img {
  text-align: center;
  img {
    display: inline-block;
    vertical-align: middle;
  }
}

.diff_panel_waterMark_image {
  .file-panel-header {
    background-color: rgba(247, 247, 247, 0.5) !important;
  }
  .diff-gutter-omit {
    background-color: rgba(248, 249, 250, 0.5) !important;
  }
  .diff-gutter-normal {
    background-color: rgba(248, 249, 250, 0.5) !important;
  }
}

.left-tree-commit-basic-information {
  padding: 0;
  .commit-basic-information-header {
    cursor: pointer;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #404040;
    margin-bottom: 4px;
    & span:last-child {
      cursor: pointer;
    }
  }
  .commit-basic-information-connet {
    display: flex;
    flex-direction: column;
    transition: heigth ease 0.2s;
    .commit-basic-information-connet-list {
      // margin-bottom: 8px;
      display: flex;
      &:last-child {
        span {
          cursor: pointer;
        }
      }
      .information-connet-list-title {
        width: 90px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #8b8b8b;
        flex-shrink: 0;
      }
      .information-connet-list-content {
        flex: 1 1;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        overflow: hidden;
      }
      span.single-tag {
        padding: 0 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 78px;
        margin-right: 4px;
      }
      span.commit-single-tag {
        padding: 2px 6px;
      }
    }
    .commit-basic-information-connet-tag {
      display: flex;
      align-items: center;
      padding-top: 8px;
      & span:last-child {
        color: #404040;
      }
      .commit-basic-information-tag {
        font-size: 12px;
        padding: 3px 8px;
        color: #0d64a0;
        background-color: rgb(211, 234, 250);
        border-color: rgb(211, 234, 250);
        border-radius: 4px;
        margin-right: 8px;
      }
    }
  }
}

.commit-right-content-comment {
  // margin-bottom: 20px;
  .commit-right-content-comment-header {
    font-size: 14px;
    color: #404040;
    height: 40px;
    line-height: 40px;
    font-weight: 600;
  }
  .commit-right-content-comment-top-switch {
    padding: 8px 0;
  }
  .commit-right-content-comment-list {
    display: flex;
    .commit-right-content-comment-list-avatar {
      display: flex;
      margin-top: 10px;
      // justify-content: center;
      // align-items: center;
    }
    .commit-right-content-comment-list-textarea {
      margin-top: 10px;
      margin-left: 12px;
      .content-comment-list-textarea {
        height: 80px;
        width: 560px;
        background: #fff;
        border: 1px solid #e9ebf0;
        border-radius: 4px;
        background-color: #fff;
      }
    }
    .commit-right-content-comment-submit-button {
      display: flex;
      justify-content: end;
      margin-top: 12px;
      margin-bottom: 20px;
    }
  }
}

.commit-conent-tips-comment {
  position: absolute;
  right: 40px;
  bottom: 20px;
  cursor: pointer;
  .commit-comment-icons {
    width: 36px;
    height: 36px;
    background-color: white;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .commit-comment-icons-count {
      font-size: 12px;
      position: absolute;
      border-radius: 50%;
      text-align: center;
      border: 1px solid #e8e8e8;
      background-color: #fff;
      &-small {
        width: 16px;
        height: 16px;
        line-height: 16px;
        right: -6px;
        top: -6px;
      }
      &-medium {
        width: 20px;
        height: 20px;
        line-height: 20px;
        right: -10px;
        top: -10px;
      }
      &-large {
        width: 26px;
        height: 26px;
        line-height: 26px;
        right: -14px;
        top: -18px;
      }
    }
  }
  // .commit-comment-icon {
  //   height: 36px;
  //   width: 36px;
  //   background: #fff;
  //   border: 1px solid #e8e8e8;
  //   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.12);
  //   background-color: #fff;
  //   border-radius: 50%;
  //   text-align: center;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  // }
  // .commit-comment-badge {
  //   position: absolute;
  //   right: -4px;
  //   top: -7px;
  //   background: #fff;
  //   color: #8b8b8b;
  //   border: 1px solid #e8e8e8;
  //   border-radius: 50%;
  //   font-size: 12px;
  //   text-align: center;
  //   white-space: nowrap;
  //   width: auto;
  //   min-width: 16px;
  //   height: 16px;
  //   line-height: 16px;
  //   padding: 0 2px;
  // }
  // .#{$teamix-prefix}badge-count {
  //   position: absolute;
  //   right: -8px !important;
  //   top: -10px;
  //   background: #fff;
  //   color: #8b8b8b;
  //   border: 1px solid #e8e8e8;
  // }
}

.commit-basic-information-connet-list {
  position: relative;
  .associate-label-task {
    margin-bottom: 0;
    padding: 0;
    margin-top: 0;
  }
  .uiless-associate {
    border: none;
  }
  .uiless-associate-bar {
    height: 24px;
  }
  .uiless-associate-bar-left {
    padding: 0;
  }
  .uiless-associate-codeup-task-select {
    padding: 0;
    margin-top: 2px;
    .uiless-associate-codeup-task-select-left {
      width: 124px;
      padding-left: 1px;
      .#{$teamix-prefix}input {
        border-radius: 0;
      }
    }
    .uiless-associate-codeup-task-select-right {
      width: 125px;
      max-width: 125px;
      .#{$teamix-prefix}input {
        border-radius: 0 !important;
      }
    }
  }
  .asssociate-task-select-popup {
    left: 0 !important;
  }
  .associate-item-wrap {
    padding: 0;
    .associate-codeup-commit-item {
      padding: 0;
      .associate-codeup-commit-item-status {
        margin-left: 2px;
        & > div {
          margin: 0;
        }
      }
      .associate-codeup-commit-item-name {
        max-width: 155px;
        width: 155px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .uiless-associate-bar-left-commit-change {
    & > div {
      font-size: 14px;
      color: #8b8b8b;
    }
  }
}

.uiless-associate-panel {
  .associate-item-wrap-content {
    padding: 0;
  }
  .associate-list.associate-list-tasks {
    margin-top: 0;
    margin-bottom: 0;
    .associate-item-wrap {
      padding: 0 2px;
      .associate-item-wrap-operation {
        margin-right: 0;
      }
    }
  }
}

.commit-right-sort-setting {
  position: absolute;
  top: 0;
  right: 0px;
  z-index: 99;
}
